<template>
    <div>
        <div class="one-top">
            <span class="left">ele.em</span>
            <span v-if="msg" class="right" @click="right">我的|注册</span>
            <span v-else class="right1" @click="right"><van-icon name="contact" size="25"/></span>
        </div>
        <div class="one-root" >
        <p>当前定位城市:  <span>定位不准,手动选择</span></p>
        <div class="one" @click="tiao(guess.name,guess.id)">{{guess.name}}</div>
        </div>
        <div class="hot-root">
        <p class="group-A">热门城市</p>
        <div class="hot">
            <p v-for="(v,i) in hot" :key="i" @click="tiao(v.name,v.id)">{{v.name}}</p>
        </div>
        </div>
        <div class="group-root">
            <div v-for="(v,i) in arr" :key="i">
                <p class="group-A">{{v}}</p>
                <div class="group">
                <p v-for="(item,j) in group[v]" :key="j"  @click="tiao(item.name,item.id)">{{item.name}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>


    export default {
        name: "City",
        data:()=>{
            return{
                guess:"",
                hot:"",
                group:"",
              arr:[],
            }
        },
        computed: {

            msg(){
                if (localStorage.user==undefined){
                    return true;
                }else {
                    return false;
                }
            }
        },
        created() {
            this.axios.get("https://elm.cangdu.org/v1/cities?type=guess").then(data=>{
                console.log(data.data);
                this.guess=data.data;
            }).catch(error=>{console.log(error)});
            this.axios.get("https://elm.cangdu.org/v1/cities?type=hot").then(data=>{
                console.log("热门城市",data.data);
                this.hot=data.data;
            }).catch(error=>{console.log(error)});
            this.axios.get("https://elm.cangdu.org/v1/cities?type=group").then(data=>{
                console.log("全部城市",data.data);
                for (let i in data.data){
                  this.arr.push(i)
                }
              this.arr=this.arr.sort();
                this.group=data.data;
            }).catch(error=>{console.log(error)})
        },
        methods:{
            tiao(a,b){
                localStorage.SityId=b;
                this.$router.push({path:"/sire",query:{id:b}})
this.$store.commit("alter",a);
            },
            right(){
                if (localStorage.user==undefined){
                    this.$router.push("/loin")
                }else {
                    this.$router.push("/my")
                }
                // this.$router.push("/loin");
            }
        },

    }
</script>

<style scoped>
    .one-top {
        background-color: #3190e8;
        height: 45px;
        line-height: 45px;
        /*display: flex;*/
        /*justify-content: space-between;*/
        color: white;
        text-align: center;
        padding-right: 2%;
        padding-left: 2%;
        position: fixed;
        width: 96%;
    }
    .one-root{
        background-color: white;
        padding-top: 45px;
    }
    .one-root p{
        border-bottom: .025rem solid #e4e4e4;
    }
    .left{

        float: left;
    }.right{
        float: right;
         }
    .right1{
        float: right;
        margin-top:10px;
    }
    .one{
        height: 40px; line-height: 40px; color: #3190e8;
        padding-left: 10px;
        font-size: 20px;
        border-bottom: 2px solid #e4e4e4;
    }
.hot,.group{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    border-bottom: 2px solid #e4e4e4;
    /*justify-content: space-between;*/
    /*background-color: cornflowerblue;*/

}
.hot p{
    color: #3190e8;
}
    .hot p,.group p{
        width: 24.7%;
        border-bottom: .025rem solid #e4e4e4;
        border-right: .025rem solid #e4e4e4;
        height: 40px;
        text-align: center;
        line-height: 40px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        /*padding-left: 10px;*/
        /*background-color: olivedrab;*/
    }
.group-A{
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    border-bottom: .025rem solid #e4e4e4;

}
    .hot-root,.group-root{
        /*margin-bottom: 10px;*/
        margin-top: 10px;
        background-color: white;
    }

</style>